<template>
    <div class="container">
        <div class="wrapper" @click="close()">
          <swiper :options="swiperOption">
            <swiper-slide>
              <img src="http://img1.qunarzz.com/sight/p0/1505/89/89f1dbbcb04fa163.water.jpg_350x240_e0a12e6f.jpg" alt="">
            </swiper-slide>
            <swiper-slide>
              <img src="http://img1.qunarzz.com/sight/p0/1508/de/89ff6b45a3ba58b798c2d3c917109c36.water.jpg_350x240_91133abe.jpg" alt="">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
    </div>
</template>

<script>
    export default {
        name: "gallary",
        data(){
          return{
            swiperOption:{//
              pagination:".swiper-pagination",
              paginationType:'fraction',
              loop:true,
              observeParents:true,
              observer:true
            }
          }
        },
      methods:{
          close(){
            this.$emit("closeSwiper")
          }
      }
    }
</script>

<style scoped lang="stylus">
    .container >>> .swiper-pagination{
      overflow :inherit;
    }
    .container >>> .swiper-pagination-fraction{
      color :white;
    }
    .container{
        display :flex;
        flex-direction :column;
        justify-content :center;
        width :100%;
        background :black;
        position :fixed;
        top:0;
        left :0;
        bottom :0;
        .wrapper{
          background :white;
          width :100%;
            img{
              width :100%;
            }
        }
    }
</style>
